<template>
  <!-- 对话框 -->
  <el-drawer
    :title="title"
    :visible.sync="openSheet"
    :with-header="false"
    :size="drawer_size"
    direction="rtl"
    :append-to-body="true"
    custom-class="my-drawer"
    :before-close="hidden"
    :modal="false"
  >
    <div class="my-drawer__content">
      <PDFJSViewer :urlpath="url" :full-height="false" />
      <div class="demo-drawer__footer">
        <el-button class="footer-button" @click="cancel">关闭</el-button>
        <el-button class="footer-button" @click="adjustWidth(+5)">增加显示</el-button>
        <el-button class="footer-button" @click="adjustWidth(-5)">减少显示</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import PDFJSViewer from '../PDFJSViewer/PDFJSViewer';
export default {
  name: 'PDFViewerDrawer',
  components: { PDFJSViewer },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
    url: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      openSheet: false,
      size: 60,
      close: true
    };
  },
  computed: {
    drawer_size() {
      return this.size + '%'
    }
  },
  methods: {
    adjustWidth(x) {
      if (x < 0) {
        if (this.size > 50) {
          this.size += parseInt(x);
        }
      } else if (x > 0) {
        if (this.size < 70) {
          this.size += parseInt(x);
        }
      }
    },
    openSheetDrawer() {
      if (this.close) {
        this.openSheet = !this.openSheet;
        this.close = false
        this.$emit('show')
      } else {
        this.$emit('show')
      }
    },
    cancel() {
      this.close = true;
      this.openSheet = !this.openSheet;
    },
    hidden(done) {
      if (this.close) {
        done()
      } else {
        this.$emit('hidden')
      }
    }
  }
};
</script>

<style scoped>
.my-el-drawer__content {
  height: 100vh;
}
.footer-button {
  float: right;
  margin: 10px 10px 0 0;
}
</style>
